<template>
    <div>
        <div style="text-align: right;margin: 10px;">
            <Button type="primary" @click="handlerCreateRole" icon="ios-add-circle-outline">新增角色</Button>
        </div>
        <div>
            <Table border :columns="columns" :data="data"></Table>
        </div>
        
        <div>
            
            <Modal
                    v-model="permissionModal.show"
                    :title="permissionModal.title"
                    footer-hide
                    @on-cancel="permissionModal.show = false"
            >
                <div v-if="permissionModal.show">
                    <rbac-power-page
                            :show-checkbox="true"
                            :show-op-btn="false"
                            @on-save-role-permission="handlerSaveRolePermission"
                            :permission-check-id-list="permissionModal.permissionIdList"
                    ></rbac-power-page>
                </div>
            
            </Modal>
        
        </div>
        
        <!--新增与修改-->
        <div>
            
            <Modal
                    v-model="editRoleModal.show"
                    :title="editRoleModal.title"
                    footer-hide
                    @on-cancel="editRoleModal.show = false"
            >
                <div v-if="editRoleModal.show">
                    <Form v-if="editRoleModal.show" :ref="editRoleModal.formRef" :model="editRoleModal.data" :label-width="120">
                        <FormItem label="名称" prop="name" required>
                            <Input type="text" v-model="editRoleModal.data.name" placeholder="名称"></Input>
                        </FormItem>
                        
                        <FormItem label="描述" prop="desc">
                            <Input type="text" v-model="editRoleModal.data.desc"></Input>
                        </FormItem>
                        
                        <FormItem label="状态" prop="status">
                            <i-switch v-model="editRoleModal.data.status" :true-value="1" :false-value="0" size="large">
                                <span slot="open">启用</span>
                                <span slot="close">不启用</span>
                            </i-switch>
                        </FormItem>
                        
                        <FormItem>
                            <Button type="primary" @click="handleEditAndCreateRoleSubmit">提交</Button>
                        </FormItem>
                    
                    </Form>
                </div>
            
            </Modal>
        
        </div>
    
    </div>
</template>

<script>
    import rbacUtl from '../auth-route-utl'
    import RbacPowerPage from "./rbacPowerPage";
    
    var roleDefaultSetInfo = {
        name  : '',
        desc  : '',
        status: 1,
    };
    export default {
        name      : "rbacRolePage",
        components: {RbacPowerPage},
        data() {
            return {
                editRoleModal  : {
                    show   : false,
                    title  : '编辑',
                    formRef: 'editRoleFormRef',
                    data   : Object.assign({}, roleDefaultSetInfo),
                },
                permissionModal: {
                    show            : false,
                    title           : '角色拥有权限',
                    permissionIdList: [],
                    id              : null,
                    row             : {},
                },
                columns        : [
                    {
                        title: 'id',
                        key  : 'id',
                        width: 100
                    },
                    {
                        title : '名称',
                        key   : 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title : '是否启用',
                        key   : 'status',
                        width : 100,
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.status ? '是' : '否')
                            ]);
                        }
                    },
                    {
                        title: '描述',
                        key  : 'desc',
                        width: 350
                    },
                    {
                        title: '创建时间',
                        key  : 'created_at'
                    },
                    {
                        title: '更新时间',
                        key  : 'updated_at'
                    },
                    {
                        title : '操作',
                        key   : 'action',
                        width : 250,
                        align : 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on   : {
                                        click: () => {
                                            this.show(params)
                                        }
                                    }
                                }, '详情'),
                                h('Button', {
                                    props: {
                                        type: 'success',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on   : {
                                        click: () => {
                                            this.showPermission(params)
                                        }
                                    }
                                }, '权限'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on   : {
                                        click: () => {
                                            this.remove(params)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data           : [],
            }
        },
        methods   : {
            show(param) {
                this.editRoleModal.show  = true;
                this.editRoleModal.title = `【${param.row.name}】角色信息`;
                this.editRoleModal.data  = {
                    name  : param.row.name,
                    desc  : param.row.desc,
                    status: param.row.status,
                };
                
                this.handleEditAndCreateRoleSubmit = () => {
                    if (!this.checkInfoSubmit(this.editRoleModal.data)) {
                        return false;
                    }
                    
                    rbacUtl.request(
                        {
                            url   : rbacUtl.generalUrlWithUrlPreByUri(rbacUtl.urlList.updateRole.replace('{id}', param.row.id)),
                            method: 'put',
                            data  : this.editRoleModal.data,
                        },
                        (res) => {
                            this.$Message.success(`修改角色成功`);
                            param.row.name       = this.editRoleModal.data.name;
                            param.row.desc       = this.editRoleModal.data.desc;
                            param.row.status     = this.editRoleModal.data.status;
                            param.row.updated_at = this.getDateTime();
                        }
                    );
                };
            },
            remove(param) {
                this.$Modal.confirm({
                    title  : '角色删除确认',
                    content: '确认删除该角色吗',
                    onOk   : () => {
            
                        rbacUtl.request(
                            {
                                url   : rbacUtl.generalUrlWithUrlPreByUri(rbacUtl.urlList.destroyRole.replace('{id}', param.row.id)),
                                method: 'delete',
                            },
                            (res) => {
                                this.$Message.success('删除角色成功');
                                this.data.splice(param.index, 1);
                            }
                        );
            
                    },
                });
            },
            getRoleData() {
                rbacUtl.request(
                    {
                        url   : rbacUtl.generalUrlWithUrlPreByUri(rbacUtl.urlList.getRoleList),
                        method: 'post',
                        data  : {
                            page_info : {
                                page    : 1,
                                per_page: 1e10
                            },
                            conditions: [],
                        },
                    },
                    (res) => {
                        this.data = res.data.data.total_count ? res.data.data.list : [];
                    }
                );
            },
            showPermission(params) {
                this.permissionModal.show             = true;
                this.permissionModal.title            = `角色【${params.row.name}】的权限`;
                this.permissionModal.permissionIdList = params.row.power;
                this.permissionModal.id               = params.row.id;
                this.permissionModal.row              = params.row;
            },
            handlerSaveRolePermission(permissionList) {
                rbacUtl.request(
                    {
                        url   : rbacUtl.generalUrlWithUrlPreByUri(rbacUtl.urlList.assignRolePermission.replace('{id}', this.permissionModal.id)),
                        method: 'put',
                        data  : {
                            power: permissionList,
                        }
                    },
                    (res) => {
                        this.$Message.success(`更新角色【${this.permissionModal.row.name}】权限成功`);
                        this.permissionModal.row.power = permissionList;
                    }
                );
            },
            handlerCreateRole() {//添加操作
                this.editRoleModal.show  = true;
                this.editRoleModal.title = '新增角色';
                this.editRoleModal.data  = Object.assign({}, roleDefaultSetInfo);
                
                this.handleEditAndCreateRoleSubmit = () => {
                    if (!this.checkInfoSubmit(this.editRoleModal.data)) {
                        return false;
                    }
                    rbacUtl.request(
                        {
                            url   : rbacUtl.generalUrlWithUrlPreByUri(rbacUtl.urlList.createRole),
                            method: 'post',
                            data  : this.editRoleModal.data,
                        },
                        (res) => {
                            this.editRoleModal.show = false;
                            this.$Message.success(`添加角色成功`);
                            this.getRoleData();
                        }
                    );
                };
            },
            handleEditAndCreateRoleSubmit() {},//在决堤操作中改写
            getDateTime(date) {
                let now       = date || new Date(),
                    dateYear  = now.getFullYear(),
                    dateMonth = (now.getMonth() + 1).toString().padStart(2, 0),
                    dateDate  = now.getDate().toString().padStart(2, 0),
                    h         = now.getHours().toString().padStart(2, 0),
                    m         = now.getMinutes().toString().padStart(2, 0),
                    s         = now.getSeconds().toString().padStart(2, 0),
                    ms        = now.getMilliseconds();//毫秒
                return (dateYear + "-" + dateMonth + "-" + dateDate + " " + h + ":" + m + ":" + s);
            },
            checkInfoSubmit(data) {
                var placeReg = new RegExp(/( )/g);
                if (!data.name.replace(placeReg, '')) {
                    this.$Message.error('【名称】必须填写');
                    return false;
                }
        
                return true;
            },
        },
        created() {
            this.getRoleData();
        }
    }
</script>

<style scoped>

</style>
